<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>取血中心</title>
    <link rel="shortcut icon" type="image/x-icon" href="../../../img/favicon.ico">
    <link rel="stylesheet" href="../../../element-theme/blue/index.css">
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
    </style>
</head>
<body>

<div class="data-manage-table">
    <template>

        <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
            <el-form-item label="血液ID">
                <el-input v-model="pagination.bloodId" placeholder="请输入血液编号"></el-input>
            </el-form-item>
            <el-form-item label="输血申请单号">
                <el-input v-model="pagination.transfusionNumber" placeholder="请输入血液编号"></el-input>
            </el-form-item>
            <el-form-item label="患者身份证号">
                <el-input v-model="pagination.patientIdCard" placeholder="请输入患者身份证号"></el-input>
            </el-form-item>
            <el-form-item label="医生编号">
                <el-input v-model="pagination.doctorJobNum" placeholder="请输入医生编号"></el-input>
            </el-form-item>

            <el-form-item label="取血人工号">
                <el-input v-model="pagination.bloodTakerJobnum" placeholder="请输入取血人工号"></el-input>
            </el-form-item>

            <el-form-item label="取血单号">
                <el-input v-model="pagination.bloodTakeNumber" placeholder="请输入取血单号"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getByQueryPage(1)">搜索</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="info" @click="getByQueryPage()">重置</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="danger" @click="batchDelete()">批量删除</el-button>
            </el-form-item>

        </el-form>


        <el-table  ref="takerTable" id="tableInfo" :data="tableData" style="width: 100%" border
                   :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row fit>
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="bloodId" label="血液编号"  align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <el-button type="text"  @click="viewInfo(scope.row)">{{ scope.row.bloodId }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="transfusionNumber" label="输血申请单号"  align="center"></el-table-column>
            <el-table-column prop="transfusionType" label="取血类型"  align="center"></el-table-column>
            <el-table-column prop="patientIdcard" label="患者身份证号"  align="center"></el-table-column>
            <el-table-column prop="state" label="取血状态" align="center">
                <template slot-scope="scope">
                    {{ getStateName(scope.row.state) }}
                </template>
            </el-table-column>
            <el-table-column prop="doctorJobnum" label="审批医生工号" align="center"></el-table-column>
            <el-table-column prop="fetchTime" label="取血时间"  align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    {{ scope.row.fetchTime }}
                </template>
            </el-table-column>
            <el-table-column prop="bloodTakerJobnum" label="取血人工号" align="center"></el-table-column>
            <el-table-column prop="bloodTakeNumber" label="取血单号"  align="center"></el-table-column>

            <!-- 相关操作 -->
            <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button size="small" type="danger" @click="registerFormVisible=true;Fetch(scope.row)" :disabled="scope.row.state!='28'">取血</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="登记信息" center :visible.sync="registerFormVisible" width="50%">

            <el-descriptions :content-style="rowCenter" :label-style="rowCenter" class="margin-top" :column="2" :size="size" border>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        待取血液ID
                    </template>
                    {{ registerForm.bloodId }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        待取血类型
                    </template>
                    {{ registerForm.transfusionType }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        输血申请单号
                    </template>
                    {{ registerForm.transfusionNumber }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        取血人工号
                    </template>
                    <el-form ref="registerForm" :model="registerForm" :rules="registerFormRules" :inline="true" label-position="right" label-width="100px">
                        <el-form-item  prop="bloodTakerJobnum">
                            <el-input v-model="registerForm.bloodTakerJobnum"></el-input>
                        </el-form-item>
                    </el-form>
                </el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="determine('registerForm')">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="血液详细信息" center :visible.sync="dialogDetailVisible" width="60%">
            <el-descriptions :content-style="rowCenter" :label-style="rowCenter" class="margin-top" :column="2" :size="size" border>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血液编号
                    </template>
                    {{ detailDes.bloodId }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        输血申请单号
                    </template>
                    {{ detailDes.transfusionNumber }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血液成分
                    </template>
                    {{ detailDes.bloodComponent }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血量
                    </template>
                    {{ detailDes.bloodCount }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血型
                    </template>
                    {{ detailDes.bloodType }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        审批医生工号
                    </template>
                    {{ detailDes.doctorJobnum }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        病人身份证号
                    </template>
                    {{ detailDes.patientIdcard }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        取血时间
                    </template>
                    {{ detailDes.fetchTime }}
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>





        <!--分页组件-->
        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[5,10,15]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total"
                    style="text-align: center; margin-top: 20px;">
            </el-pagination>
        </div>


    </template>

</div>

<script src="../../../js/vue.min.js"></script>
<script src = "../../../js/2.15.12/index.js"></script>
<link href = "../../../css/2.15.12/index.css" rel="stylesheet">
<script src="../../../plugins/axios-0.27.2/axios.min.js"></script>
<script src="../../../icons/iconfont.js"></script>
<script src="../../../js/httpVueLoader.js"></script>
<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
<script>
    (
        function () {
            new Vue({
                el: '.data-manage-table',
                data() {
                    //员工工号校验
                    const checkJobnum = (rule, value, callback) => {
                        if (!value) {
                            return callback(new Error('员工工号不能为空'))
                        }
                        if (!/^\d+$|^\d+[.]?\d+$/.test(value)) {
                            callback(new Error('请输入正确的员工工号'))
                        } else {
                            callback()
                        }
                    }
                    return {
                        // 描述列表文字居中
                        rowCenter:{
                            "text-align":"center"
                        },
                        // 描述列表
                        size: '',

                        // 待取血表格
                        tableData : [],

                        // 状态字典列表
                        stateList : '',

                        // 血液成分
                        bloodComponentList : '',

                        // abo血型
                        aboBloodTypeList : '',

                        // 取血记录描述列表开关
                        dialogDetailVisible:false,

                        // 取血记录详情
                        detailDes : '',

                        // 血量列表
                        bloodSizeList : [],


                        // rh血型
                        rhBloodTypeList : '',


                        //分页相关信息
                        pagination: {
                            currentPage: 1, //当前页码
                            pageSize: 5, //每页显示记录数
                            total: 0, //总记录数
                            //查询条件
                            bloodId: '',
                            transfusionNumber : '',
                            patientIdcard : '',
                            doctorJobNum : '',
                            bloodTakerJobnum : '',
                            bloodTakeNumber : '',
                        },

                        // 当前用户登录信息
                        user: {
                            "accountNonExpired": true,
                            "accountNonLocked": true,
                            "credentialsNonExpired": true,
                            "enable": false,
                            "enabled": false,
                            "jobnum": "tom",
                            "menuUrls": {
                                "menu": [{
                                    "urls": [{
                                        "id": "11",
                                        "title": "11",
                                        "url": "/pages/error/403.html",
                                        "titleflag": "error"
                                    }], "title": "testerror", "titleflag": "error"
                                }, {
                                    "urls": [{
                                        "id": "22",
                                        "title": "5-5",
                                        "url": "/pages/error/505.html",
                                        "titleflag": "testerror"
                                    }], "title": "testerror2", "titleflag": "testerror"
                                }]
                            },
                            "noLocked": false,
                            "personalization": {
                                "asideFold": false,
                                "mainTabsHeaderFixed": true,
                                "asideControlOpen": false,
                                "headerSkin": "colorful",
                                "headerFixed": false,
                                "skin": "brown",
                                "asideSkin": "dark",
                                "asideControlFixed": true
                            },
                            "username": "tom"
                        },

                        // 登记表格默认看不到
                        registerFormVisible : false,

                        // 登记取血人信息
                        registerForm : {
                            bloodId : '',
                            transfusionNumber: '',
                            transfusionType: '',
                            bloodTakerJobnum : '',
                        },

                        // 取血登记表单验证
                        registerFormRules : {
                            bloodTakerJobnum : [{
                                required : true,
                                message : '取血人工号不能为空',
                                trigger : 'blur',
                            }, {
                                validator: checkJobnum,
                                trigger : 'blur'
                            }],
                        }


                    }
                },

                //自动触发写入的函数
                created() {
                    this.getByQueryPage();
                },

                mounted(){
                    this.getBloodSize();
                    this.getState();
                    this.getAboBloodType();
                    this.getRhBloodType();
                    this.getBloodComponent();
                    this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
                },

                methods: {
                    viewInfo(row) {
                        console.log(row)
                        this.detailDes = row;
                        this.dialogDetailVisible = true
                    },
                    //批量删除
                    batchDelete() {
                        if(JSON.parse(JSON.stringify(this.$refs.takerTable.selection)).length==0){
                            this.$notify({
                                title: '温馨提示：',
                                message: '您未选中数据，请重新操作！！！',
                                type: 'warning'
                            });
                            return;
                        }
                        let checkArr = JSON.parse(JSON.stringify(this.$refs.takerTable.selection));  // 存储了勾选到的数据
                        var ids=new Array()
                        for(var i=0;i<checkArr.length;i++){
                            ids[i]=checkArr[i].id;
                        }
                        console.log("打印所选编号")
                        console.log(ids)
                        // let data={ids:ids}
                        //批量删除
                        this.$confirm('确定删除这些数据吗, 是否继续?', '批量删除', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            axios({
                                url: '/bloodTake/normal/batchDelete',
                                method: 'put',
                                dataType: 'json',
                                data:ids
                            }).then(res => {
                                if (res.data.code === '200') {
                                    this.$notify({
                                        tile: '温馨提示',
                                        message: '批量删除成功！！！',
                                        type: 'success'
                                    })
                                    //刷新页面
                                    this.handleCurrentChange(this.pagination.currentPage);
                                } else {
                                    this.$notify({
                                        tile: '警告',
                                        message: '删除出错',
                                        type: 'warning'
                                    })
                                }
                            }).catch(err => {
                                this.$notify.error({
                                    title: '错误',
                                    message: '删除失败',
                                })
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        });
                    },
                    //分页查询
                    getByQueryPage: function (flag) {
                        //用于重置搜索条件
                        if (flag != 1) {
                            this.pagination.bloodId = '';
                            this.pagination.transfusionNumber = '';
                            this.pagination.patientIdcard = '';
                            this.pagination.doctorJobNum = '';
                            this.pagination.bloodTakeNumber = '';
                            this.pagination.bloodTakerJobnum = '';
                            this.pagination.currentPage = 1;
                        }
                        axios.get('/bloodTake/normal/' + this.pagination.currentPage + '/' + this.pagination.pageSize,
                            {
                                params: {
                                    bloodId: this.pagination.bloodId,
                                    transfusionNumber : this.pagination.transfusionNumber,
                                    patientIdcard : this.pagination.patientIdcard,
                                    doctorJobNum : this.pagination.doctorJobNum,
                                    bloodTakeNumber : this.pagination.bloodTakeNumber,
                                    bloodTakerJobnum : this.pagination.bloodTakerJobnum,
                                }
                            }).then((res) => {
                            console.log(res.data);
                            if (res.data.code === "200") {
                                this.pagination.pageSize = res.data.data.size;
                                this.pagination.currentPage = res.data.data.current;
                                this.pagination.total = res.data.data.total;
                                this.tableData = Object.values(res.data.data.records);
                            } else {
                                this.$message.success("查询失败");
                            }
                        });
                    },

                    // 获取需要分配的血液id
                    Fetch(row){
                        this.registerForm.transfusionNumber = row.transfusionNumber
                        this.registerForm.bloodId = row.bloodId
                        this.registerForm.transfusionType = row.transfusionType
                    },

                    // 登记取血人表格关闭
                    cancel(){
                        this.registerForm.bloodTakerJobnum = ''
                        this.registerForm.transfusionNumber = ''
                        this.registerForm.phoneNum = ''
                        this.registerForm.idcard = ''
                        this.registerFormVisible = false
                    },

                    // 登记取血人表格确认
                    determine(registerForm){
                        this.$refs.registerForm.validate((valid) => {
                            if (valid) {
                                axios({
                                    method : 'put',
                                    url : '/bloodTake/normal/editData',
                                    data : JSON.stringify({
                                        bloodId : this.registerForm.bloodId,
                                        doctorJobnum : this.user.jobnum,
                                        fetchTime : this.getNowTime(),
                                        bloodTakerJobnum : this.registerForm.bloodTakerJobnum,
                                    }),
                                    headers : {
                                        'Content-Type' : 'application/json;charset=UTF-8'
                                    }
                                }).then((res)=>{
                                    if (res.data.code === '200'){
                                        //刷新页面
                                        this.handleCurrentChange(this.pagination.currentPage);
                                        this.$notify({
                                            title : '成功',
                                            message : res.data.data,
                                            type : 'success',
                                        })
                                        // 更改整体输血表状态信息
                                        axios({
                                            url : ' /overall/normal/setOverallBloodState',
                                            method : 'put',
                                            data : JSON.stringify({
                                                transfusionNumber : this.registerForm.transfusionNumber,
                                                state : '6', // 6代表已取血
                                            }),
                                            headers : {
                                                'Content-Type' : 'application/json;charset=UTF-8'
                                            }
                                        }).then((res)=>{
                                            if (res.data.code === '200'){
                                                this.$notify({
                                                    title : '消息',
                                                    message : res.data.data,
                                                    type : 'success'
                                                })
                                            }else {
                                                this.$notify({
                                                    title : '消息',
                                                    message : '未找到匹配血液信息',
                                                    type : 'warning'
                                                })
                                            }
                                        })

                                        if (this.registerForm.transfusionType == '异体血'){
                                            // 更改血液信息表信息状态
                                            axios({
                                                url : ' /bloodInformation/normal/setBloodInfoState',
                                                method : 'put',
                                                data : JSON.stringify({
                                                    bloodId : this.registerForm.bloodId,
                                                    state : '27', // 27代表的已取血
                                                }),
                                                headers : {
                                                    'Content-Type' : 'application/json;charset=UTF-8'
                                                }
                                            }).then((res)=>{
                                                if (res.data.code === '200'){
                                                    this.$notify({
                                                        title : '消息',
                                                        message : res.data.data,
                                                        type : 'success'
                                                    })
                                                }else {
                                                    this.$notify({
                                                        title : '消息',
                                                        message : '未找到匹配血液信息',
                                                        type : 'warning'
                                                    })
                                                }
                                            })
                                        } else {
                                            // 更改自体血液信息表信息状态
                                            axios({
                                                method : 'put',
                                                url : '/autologousBlood/normal/setAutoBloodInfoState',
                                                data : JSON.stringify({
                                                    bloodId : this.registerForm.bloodId,
                                                    state : '27' //27代表已取血
                                                }),
                                                headers : {
                                                    'Content-Type' : 'application/json;charset=UTF-8'
                                                }
                                            }).then((res)=>{
                                                if (res.data.code === '200'){
                                                    this.$notify({
                                                        title : '消息',
                                                        message : res.data.data,
                                                        type : 'success'
                                                    })
                                                }
                                            })
                                        }
                                    }
                                })
                                this.cancel();
                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        })
                    },

                    // 获取状态字典
                    getState(){
                        axios.get('/state/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200'){
                                    this.stateList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title : '错误',
                                        message : '获取数据失败'
                                    })
                                }
                            })
                    },

                    // 将表格中的State字段的code转换成name
                    getStateName(code){
                        for (var i=0;i<this.stateList.length;i++){
                            if (this.stateList[i].code == code){
                                return this.stateList[i].state
                            }
                        }
                    },

                    // 获取abo血型字典
                    getAboBloodType(){
                        axios.get('/aboType/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.aboBloodTypeList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中aboBloodType字段的code转换成name
                    getAboBloodName(code){
                        for (var i = 0; i < this.aboBloodTypeList.length; i++) {
                            if (this.aboBloodTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.aboBloodTypeList[i].name;
                            }
                        }
                    },

                    // 获取血量字典
                    getBloodSize(){
                        axios.get('/bloodSize/normal/getName1')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.bloodSizeList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中bloodCount字段的code转换成size
                    getBloodSizeName(code){
                        for (var i = 0; i < this.bloodSizeList.length; i++) {
                            if (this.bloodSizeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodSizeList[i].size;
                            }
                        }
                    },

                    // 获取rh血型字典
                    getRhBloodType(){
                        axios.get('/rhType/normal/sgetName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.rhBloodTypeList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中rhType字段的code转换成name
                    getRhBloodName(code){
                        for (var i = 0; i < this.rhBloodTypeList.length; i++) {
                            if (this.rhBloodTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.rhBloodTypeList[i].name;
                            }
                        }
                    },


                    // 获取血液成分字典
                    getBloodComponent(){
                        axios.get('/bloodComposition/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.bloodComponentList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中bloodComponent字段的code转换成name
                    getBloodComponentName(code){
                        for (var i = 0; i < this.bloodComponentList.length; i++) {
                            if (this.bloodComponentList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodComponentList[i].composition;
                            }
                        }
                    },

                    // 获取当前时间
                    getNowTime(){
                        var date = new Date();
                        var year = date.getFullYear();
                        var month = date.getMonth()+1;
                        var day = date.getDate();
                        var hour = date.getHours();
                        var minute = date.getMinutes();
                        var second = date.getSeconds();

                        var time = year + '-' + this.handleTimeStr(month) + '-' +
                            this.handleTimeStr(day) + ' ' + this.handleTimeStr(hour) + ':' + this.handleTimeStr(minute)
                            + ':' + this.handleTimeStr(second);
                        return time;
                    },

                    // 分页查询 每页显示多少条数据
                    handleSizeChange: function (pageSize) {
                        this.pagination.pageSize = pageSize;
                        this.getByQueryPage(1);
                    },

                    //分页查询 切换页码
                    handleCurrentChange: function (currentPage) {
                        this.pagination.currentPage = currentPage;
                        //执行查询
                        this.getByQueryPage(1);
                    },

                    // 时间标准化
                    handleTimeStr(tStr) {  // 解决 10:2:2 出现各位数字格式化为 10:02:02
                        if (tStr < 10) {
                            return '0' + tStr
                        } else {
                            return tStr
                        }
                    },

                }
            });
        })()
</script>

</body>
</html>